/**
 * <modal>
 *
 * App-wide styles for our modals.
 */
 [parasails-component='signup-modal'] {
   max-width: 100vw;
   -webkit-overflow-scrolling: touch;//« makes this actually scrollable on certain phones
   margin-top: 40px;
   [purpose='signup-modal'] {
     display: flex;
     max-width: 600px;

     flex-direction: column;
     gap: 24px;

     [purpose='modal-logo'] {
      img {
        width: 32px;
        height: auto;
      }
     }
     [purpose='form-switch'] {
      [purpose='form-option'] {
        user-select: none;
        cursor: pointer;
        width: fit-content;
        padding: 8px 16px 8px 0px;
        margin-bottom: 4px !important;//lesshint-disable-line importantRule
        display: flex;
        flex-direction: row;
        align-items: center;
        border-radius: 7px;
        border: none;
        color: #515774 !important;//lesshint-disable-line importantRule
        font-size: 14px !important;//lesshint-disable-line importantRule
        font-weight: 400 !important;//lesshint-disable-line importantRule
        line-height: 150%;
        white-space: nowrap;
        height: fit-content;
        input[type='radio'] {
          cursor: pointer;
          margin-right: 8px;
          display: none;
        }
        [purpose='custom-radio'] {
          margin-right: 8px;
          display: flex;
          min-width: 18px;
          min-height: 18px;
          border-radius: 50%;
          border: 1px solid #E2E4EA;
          justify-content: center;
          align-items: center;
          [purpose='custom-radio-selected'] {
            min-width: 10px;
            min-height: 10px;
            border-radius: 50%;
            background-color: @core-vibrant-green;
            transform: scale(0);
            transition: 180ms transform ease-in-out;
          }
        }
        input[type='radio']:checked + [purpose='custom-radio'] {
          [purpose='custom-radio-selected'] {
            transform: scale(1);
          }
        }
      }
     }

     [purpose='modal-form'] {
       [purpose='modal-form-input'] {
         height: 40px;
         border-radius: 6px;
       }
       [purpose='modal-form-label'] {
        color: #192147;
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 21px; /* 150% */
       }
       [purpose='modal-form-note'] {
         font-size: 12px !important;//lesshint-disable-line importantRule
       }

       [purpose='modal-form-link'] {
         color: @core-fleet-black-75 !important;//lesshint-disable-line importantRule
         cursor: pointer;
         font-size: 12px !important;//lesshint-disable-line importantRule
         text-decoration: underline !important;//lesshint-disable-line importantRule
         text-underline-offset: 4px !important;//lesshint-disable-line importantRule
         text-decoration-color: #C5C7D1 !important;//lesshint-disable-line importantRule
         &:hover {
           color: @core-fleet-black !important;//lesshint-disable-line importantRule
           text-decoration-color: @core-fleet-black !important;//lesshint-disable-line importantRule
         }
       }
       [parasails-component='cloud-error'] {
          p {
            color: @core-vibrant-red !important;//lesshint-disable-line importantRule
            font-size: 14px !important;//lesshint-disable-line importantRule
            a {
             text-decoration-color: @core-vibrant-red !important;//lesshint-disable-line importantRule
             color: @core-vibrant-red !important;//lesshint-disable-line importantRule
             font-size: unset !important;//lesshint-disable-line importantRule
             &:hover {
               color: darken(@core-vibrant-red, 20%) !important; //lesshint-disable-line importantRule
               text-decoration-color: darken(@core-vibrant-red, 20%) !important;//lesshint-disable-line importantRule
             }
            }
          }
       }
       [purpose='tip'] {
         margin: 16px 0 32px;
         background: #F4F4FF;
         padding: 16px;
         border-radius: 8px;
         display: flex;
         img {
           display: flex;
           margin: 4px 12px 0 0;
           height: 16px;
           width: 16px;
           padding: 0px;
         }
         p {
           display: block;
           margin-bottom: 16px;
           line-height: 24px;
           font-size: 14px !important;//lesshint-disable-line importantRule
           a {
            font-size: unset !important;//lesshint-disable-line importantRule
            color: unset !important;//lesshint-disable-line importantRule
           }
         }
         p:last-child {
           margin-bottom: 0px;
         }
       }
     }
     [purpose='modal-form-submit-button'] {

       margin-left: auto;
       margin-right: auto;
       border-radius: 8px;
       padding-top: 16px;
       padding-bottom: 16px;
       display: flex;
       align-items: center;
       span {
         display: inline;
         margin-left: auto;
         margin-right: auto;
         font-size: 16px;
         line-height: 16px;
         text-align: center;
         font-weight: 700;
       }
     }
   }
   [purpose='modal-dialog'] {
     z-index: 100;
     position: relative;
     max-width: 600px;
     [purpose='modal-content'] {
       margin-top: 0px;
       max-width: 600px;
       border-radius: 16px;
       padding: var(--spacing-6, 48px);
       border: 1px solid var(--border-border-primary, #E2E4EA);
       background: var(--surface-surface-primary, #FFF);
       [purpose='modal-close-button'] {
         .btn-reset();
         opacity: 0.6;
         color: #515774;
         top: 25px;
         right: 25px;
         font-size: 28px;
         line-height: 1;
         &:hover {
           opacity: 1;
         }
       }
     }
   }
   // Custom styles for the Bootstrap modal:
   // (Want to use Bootstrap's default styles? Just comment out the rest of the rules below)
   .petticoat {
     display: none;
     position: fixed;
     width: 100%;
     height: 75px;// should cover topbar
     z-index: 50;
     left: 0px;
     top: 0px;
     background-color: @accent-white;
   }
   .modal-content {
     border-radius: 16px;
     border: 1px solid var(--border-border-primary, #E2E4EA);
     background: var(--surface-surface-primary, #FFF);
     box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
     background-clip: border-box;
     padding-top: 40px;
     padding-bottom: 40px;
     padding-left: 40px;
     padding-right: 40px;
     .modal-header {
       border-bottom: none;
       display: block;
       position: relative;
       text-align: center;
       padding-bottom: 0px;
       padding-left: 0px;
       padding-right: 0px;
       padding-top: 0px;
       .modal-title {
         font-weight: @bold;
       }
       .modal-intro {
         margin-left: auto;
         margin-right: auto;
         color: @text-muted;
         margin-bottom: 20px;
       }
       hr {
         margin-top: 25px;
         margin-left: auto;
         margin-right: auto;
         margin-bottom: 10px;
         width: 100px;
         height: 2px;
         border-top: 2px solid @brand;
       }
     }
     .modal-body {
       padding-top: 10px;
       padding-bottom: 10px;
       padding-left: 0px;
       padding-right: 0px;
     }
     .modal-footer {
       padding-top: 25px;
       padding-bottom: 0px;
       padding-left: 0px;
       padding-right: 0px;
       margin-top: 10px;
     }
   }
 }


@media (max-width: 991px) {
  .modal-backdrop.signup {
    background-color: #FFF;
    &.show {
      opacity: 1;
      transition: none;
    }
  }


  [parasails-component='signup-modal'] {
    max-width: 100vw;
    margin-top: 0px;
    -webkit-overflow-scrolling: touch;//« makes this actually scrollable on certain phones
    [purpose='signup-modal'] {
      margin: auto;
      width: 100%;
    }
    [purpose='modal-dialog'] {
      z-index: 100;
      position: relative;
      max-width: 100%;
      [purpose='modal-content'] {
        box-shadow: none;
        margin-top: 48px;
        width: 100%;
        max-width: 100%;
        padding: 48px;
        border: none;
        [purpose='modal-close-button'] {
          top: -25px;
          right: 25px;
        }
      }
    }
  }
}

@media (max-width: 576px) {
  .modal-backdrop.signup {
    background-color: #FFF;
    &.show {
      opacity: 1;
      transition: none;
    }
  }


  [parasails-component='signup-modal'] {
    max-width: 100vw;
    -webkit-overflow-scrolling: touch;//« makes this actually scrollable on certain phones
    [purpose='signup-modal'] {
      margin: auto;
      width: 100%;
    }
    [purpose='modal-dialog'] {
      z-index: 100;
      position: relative;
      max-width: 100%;
      [purpose='modal-content'] {
        box-shadow: none;
        margin-top: 48px;
        width: 100%;
        max-width: 100%;
        padding: 24px;
        border: none;
      }
    }
  }
}


